---
import type { GetStaticPaths } from 'astro'
import PageLayout from '@/layouts/PageLayout.astro'
import { getAllCategories, getOldestPosts, slugify } from '@/utils/content'
import Highlight from '@/components/Highlight.astro'
import Timeline from '@/components/Timeline.astro'

export const getStaticPaths = (async () => {
  const allCategories = await getAllCategories()

  return allCategories.map((category) => {
    return {
      params: {
        category: category.slug,
      },
      props: { category },
    }
  })
}) satisfies GetStaticPaths

interface Props {
  category: {
    name: string
    slug: string
    count: number
  }
}

const { category } = Astro.props

const oldestPosts = await getOldestPosts().then((posts) => {
  return posts.filter((post) => post.data.category && slugify(post.data.category) === category.slug)
})
---

<PageLayout title={`分类 · ${category.name}`}>
  <div class="max-w-[800px] mx-auto px-4 py-16">
    <header class="space-y-4 mb-8">
      <h1 class="text-4xl font-bold">
        分类：<Highlight>{category.name}</Highlight>
      </h1>
      <p>共有 {category.count} 篇文章。</p>
    </header>
    <Timeline posts={oldestPosts} />
  </div>
</PageLayout>
